<template>
	<view class="teamPage">
		<n-loading></n-loading>
		<view class="myTeam">我的团员：<text>{{teamNum==''?0:teamNum}}</text>人</view>
		<view v-if="teamListReady">
			<view class="nodata" v-if="teamList.length==0">
				<image src="../../static/svgIcon/noTeam.svg" mode=""></image>
				<view class="tips">暂无团队成员~</view>
			</view>
			<view class="teamBox">
				<view class="teamList" v-for="(item,index) of teamList" :key="index">
					<!-- item.userInfo.avatar -->
					<u-avatar :src="item.userInfo.avatar==null?src:item.userInfo.avatar" size="80"></u-avatar>
					<view>
						<view class="memName">
							{{item.userInfo.nickname==null?'暂无':item.userInfo.nickname}}
							<image v-if="item.userInfo.vip!=null" :src="vipIcon[item.userInfo.vip]" mode=""></image>
						</view>
						<view class="phone">加入时间：{{getdate(item.created_at,0)}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total:null,
				teamList:[],
				teamListReady:null,
				teamNum:'',
				// isLoadMore:false,
				// page: 1,
				// pageSize: 20,
				vipIcon:[
					'https://lovebirdopen.com/static/img/grade/SilverV0.svg',
					'https://lovebirdopen.com/static/img/grade/SilverV1.svg',
					'https://lovebirdopen.com/static/img/grade/SilverV2.svg',
					'https://lovebirdopen.com/static/img/grade/SilverV3.svg',
					'https://lovebirdopen.com/static/img/grade/diamondV1.svg',
					'https://lovebirdopen.com/static/img/grade/diamondV2.svg',
					'https://lovebirdopen.com/static/img/grade/diamondV3.svg',
					'https://lovebirdopen.com/static/img/grade/goldV1.svg',
					'https://lovebirdopen.com/static/img/grade/goldV2.svg',
					'https://lovebirdopen.com/static/img/grade/goldV3.svg',
					'https://lovebirdopen.com/static/img/grade/supremeV7.svg',
				],
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
			}
		},
		onLoad: function (option) {
			this.getTeamList();
		},
		onPullDownRefresh() {
			this.teamList = [];
			this.getTeamList();
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 2000);
		},
		methods: {
			getTeamList(){
				this.apiget('/fun/member/my-team',{}).then(res =>{
					if(res.data.status == 200 ) {
						this.teamNum = res.data.data.count;
						this.teamList = res.data.data.list;
						this.teamListReady = 1;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.teamPage {
		min-height: 100%;
		background-color: #F8F8FA;
		
		.myTeam{
			padding: 28rpx 32rpx 24rpx;
			background-color: #fff;
			font-size: 28rpx;
			line-height: 48rpx;
			color: #666;
			
			text{
				font-size: 32rpx;
				color: #333;
			}
		}
		

		.teamBox {
			background-color: #FFFFFF;
			// min-height: 100%;
		}

		.teamList {
			display: flex;
			align-items: center;
			margin: 0 32rpx;
			padding: 24rpx 0;
			font-size: 32rpx;
			// border-bottom: 1rpx solid #EEEFF3;


			.u-avatar {
				margin-right: 32rpx;
			}
			
			.memName{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				line-height: 48rpx;
				color: #333;
				
				image{
					width: 92rpx;
					height: 40rpx;
					margin-left: 8rpx;
				}
			}

			.phone {
				margin-top: 10rpx;
				color: #666666;
				font-size: 24rpx;
			}

			.money {
				margin-left: auto;
				color: #FF5238;
			}
		}
	}
</style>
